function Swiper(options, wrap) {
  // 存储轮播图的挂载区域 
  this.wrap = wrap;
  this.contentList = options.contentList || [];
  this.type = options.type || 'fade';
  this.isAuto = options.isAuto === undefined ? true : !!options.isAuto;
  this.duration = options.autoChangeTime || 3000;
  this.btnStatus = options.btnStatus || 'always';
  this.spotsStatus = !!options.spotsStatus;
  this.spotsSize = options.spotsSize || 10;
  this.spotsPosition = options.spotsPosition || 'center';
  this.spotsColor = options.spotsColor || '#f20';
  // 内容区域的宽高
  this.height = options.height || wrap.height();
  this.width = options.width || wrap.width();
  // 轮播卡片的个数
  this.length = this.contentList.length;
  // 轮播索引值
  this.nowIndex = 1;
}



// 将方法写在原型上面
Swiper.prototype.init = function () {
  // 初始化轮播图的结构
  this.initElment();
  // 初始化轮播图的样式
  this.initStyle();
  // 初始化轮播图的功能
  this.initFunction();
}

Swiper.prototype.initElment = function () {
  var self = this;
  var timer = null;
  this.nowIndex = 0;
  this.swiperWrapp = $("<div></div>").addClass('swiperWrapp');
  this.swiperConent = $("<ul />").addClass('swiperContent').addClass('swiper-' + this.type);
  this.lBtn = $('<div />').addClass('btn lbtn').append($('<i/>').addClass('iconfont icon-left'));
  this.rBtn = $('<div />').addClass('btn rbtn').append($('<i/>').addClass('iconfont icon-right'));
  this.sopotConent = $('<div />').addClass('sopotConent');

  // 创建子结构

  // [].forEach.call(this.contentList, ((item) => {
  //   $(`<li><img src="${item}"></li>`).addClass('swiperItem').appendTo(self.swiperConent);
  //   $('<span />').appendTo(self.sopotConent);
  // }));
  [].forEach.call(this.contentList,function(item){
    $(`<li></li>`).addClass('swiperItem')
    .html(item)
    .appendTo(self.swiperConent);
      $('<span />').appendTo(self.sopotConent);
  })

  if (this.type === 'scroll') {
    this.swiperConent.find('li')
      .eq(0).clone()
      .appendTo(this.swiperConent)
  }

  this.swiperWrapp.append(this.swiperConent)
  .append(this.lBtn)
  .append(this.rBtn)
  .append(this.sopotConent)
  .appendTo(this.wrap);
};
Swiper.prototype.initStyle = function () {
  this.swiperWrapp.css({
    width:this.width,
    height:this.height
  })
  // 轮播点样式
  this.sopotConent.css({
      textAlign: this.spotsPosition
    })
    .find('span').css({
      'background': "#fff",
      width: this.spotsSize,
      height: this.spotsSize
    })
    .eq(this.nowIndex).css('background', this.spotsColor);
  if (this.btnStatus === 'hide') {
    this.lBtn.hide();
    this.rBtn.hide();
  }
  if (this.spotsStatus === false) {
    this.sopotConent.hide();
  } else {
    this.sopotConent.show();
  }

  // 轮播图片样式
  if (this.type === 'fade') {
    this.swiperConent.find('.swiperItem').eq(this.nowIndex).show();
    this.swiperConent.css({
      width: this.swiperWrapp.width()
    })
  }
  if (this.type === 'scroll') {
    // 给ul加宽度
    this.swiperConent.css({
      width: (this.length + 1) * this.swiperWrapp.width()
    })
  }
};
Swiper.prototype.initFunction = function () {
  var self = this;
  // 左按钮
  this.lBtn.click(_.throttle(function () {
    if (self.nowIndex == 0) {
      self.nowIndex = self.length - 1;
      if (self.type === 'scroll') {
        self.swiperConent.css({
          left: -self.length * self.swiperWrapp.width()
        })
      }
    } else {
      self.nowIndex--;
    }
    self.change();
  }, 1000))
  // 右按钮
  this.rBtn.click(_.throttle(function () {
    if (self.nowIndex < self.length) {
      self.nowIndex++;
    } else {
      self.nowIndex = 1;
      self.type === 'scroll' && self.swiperConent.css({
        left: 0
      })
    }
    self.change();
  }, 1000))
  // 轮播点点击事件
  this.sopotConent.on('mouseenter', 'span', function () {
    // 获取轮播点的索引
    // var valus = this.parentElement.children;
    // var index = [].indexOf.call(valus, this);
    // jq $(this).index()
    if(self.nowIndex === $(this).index()){
      return
    }
    self.nowIndex = $(this).index();
    self.change()
  })
  var timer = null;
  // 鼠标移入事件
  this.swiperWrapp.mouseenter(function () {
    if (self.btnStatus === 'hover') {
      self.lBtn.show();
      self.rBtn.show();
    }
    self.sopotConent.show();
    clearInterval(self.timer);
  }).mouseleave(function () {
    if (self.btnStatus === 'hover') {
      self.lBtn.hide();
      self.rBtn.hide();
    }
    self.sopotConent.hide()
    if (self.isAuto) {
      self.autoMove();
    }
  })
}
Swiper.prototype.change = function(){
    // 轮播点切换
    this.sopotConent.find('span').css('background', '#fff')
      .eq(this.nowIndex%this.length).css('background', this.spotsColor);
    // 图片切换
    if (this.type === 'fade') {
      this.swiperConent.find('.swiperItem').fadeOut().eq(this.nowIndex % this.length).fadeIn();
    }
    if (this.type === 'scroll') {
      // this.swiperConent.css({
      //   left: -this.nowIndex * 600
      // })
      this.swiperConent.animate({left:-this.nowIndex*this.swiperWrapp.width()})
    }
}

Swiper.prototype.autoMove = function(){
    var self = this;
    clearInterval(this.timer);
    this.timer = setInterval(function () {
      // self.lBtn.click();
      self.lBtn.trigger('click')
    }, this.duration)
}

function createSwiper(options) {
  var s = new Swiper(options, this);
  s.init();
}
$.fn.extend({
  swiper: createSwiper
})